<template>
  <template v-if="user">
    <van-cell title="昵称" is-link to="/user/edit" :value="user.username" @click="toEdit('username','昵称',user.username)"/>
    <van-cell title="标签" is-link to="/user/edit" :value="user.tags"    @click="toEdit('tags','标签',user.tags)"/>
    <van-cell title="账户" :value="user.userAccount" />
    <van-cell title="头像" is-link to="/user/edit" >
      <img style="height: 48px" :src="user.avatarUrl">
    </van-cell>
    <van-cell title="修改信息" is-link to="/user/update" />
    <van-cell title="我创建的队伍" is-link to="/team/create" />
    <van-cell title="我加入的队伍" is-link to="/team/join" />
    <van-button round block type="info" @click="onLogout">
      退出登录
    </van-button>
  </template>
  <van-notice-bar scrollable text="努力吧！少年！" />
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showFailToast, showSuccessToast, Toast} from "vant";
import {getCurrentUser} from "../servcies/user";
import myAxios from "../plugins/myAxios";

// const user = {
//   id : 9527,
//   username : 'shayu',
//   userAccount : '931',
//   avatarUrl : 'https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/shayu931/shayu.png',
//   gender : '男',
//   phone : '430821',
//   email : 'shayu-yusha@qq.com',
//   planetCode : '931',
//   createTime : new Date(),
// }
const user =ref();
const router = useRouter();
const route = useRoute();
const onLogout = async () => {
  const res = await myAxios.post('/user/logout', {
  });
  console.log(res, '用户退出');
  if (res.code === 0 ) {
    showSuccessToast('退出成功');
    const redirectUrl = (route.query?.redirect as string) ?? '/';
    window.location.href = redirectUrl;
  } else {
    showFailToast('退出失败');
  }
};
onMounted(async () =>{
  //获取用户信息
  const res = await getCurrentUser();
  if (res){
    user.value = res;
   // showSuccessToast('获取用户信息成功');
  } else {
    showFailToast('获取用户信息失败')
  }
})

const toEdit = (editKey: string,editName: string,currentValue: string) =>{
  router.push({
    path:'/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}

</script>

<style scoped>

</style>
